<div class="ui-loading-block show" id="list">
    <div class="ui-loading-cnt">
        <i class="ui-loading-bright"></i>
        <p>正在加载中...</p>
    </div>
</div>
<style>
    .ui-list li { margin-left:0; }
    .ui-container { background:#fff; }
    .ui-list-text > li { -moz-box-align:start; -webkit-box-align:start; -o-box-align:start; box-align:start; }
     .ui-list-img90x90 { margin:0 10px 0 10px; }
    /*.ui-header .ui-searchbar-wrap input[type="text"] { background:#5e9fd9; width:70%; height:100%; height:35px; }*/
    .ui-banner { height:200px; background:#1e1e2e; position:relative; }
    .ui-banner .ui-ai { background:url(img/ai.png); width:60px; height:60px; background-size:cover; position:absolute; left:20px; bottom:-30px; z-index: 999; }
    .ui-txt-black { color:#333; }
    /*顶部栏*/
    .ui-robot-icon{ width: 20px; height: 25px; display: inline-block; background: url(img/robot38-46@3x.png) no-repeat;background-size: 100%; margin: 18px 0 0 10px; float: left;}
    .ui-prompt-text{display: block; width: 70%; height: 30px; line-height: 30px; color:#fa891b; margin: 15px 10px; float: left; border-bottom: solid 1px #292939;}
    .ui-myself-icon{ width: 25px; height: 30px; display: inline-block; background: url(img/myself@3x.png) no-repeat;background-size: 100%; margin: 18px 10px 0 0; float: right;}
    .ui-myself-block{ position: absolute; top: 0px; right: 0px; }
    /*顶部栏特效*/
    .ui-header{
        background-color: #1e1e2e;
        opacity: 0;
        position: fixed;
        border-bottom:none;
    }
    .ui-header-before{
        position: fixed;
        border-bottom:none;
        animation:myHeader 0.2s;
        -moz-animation:myHeader 0.2s; /* Firefox */
        -webkit-animation:myHeader 0.2s; /* Safari and Chrome */
        -o-animation:myHeader 0.2s; /* Opera */
        animation-fill-mode : forwards;
    }
    @keyframes myHeader
    {
    from {width: 0px; height: 60px; opacity: 0;}
    to {width: 100%; height: 60px; opacity: 1;}
    }

    @-moz-keyframes myHeader /* Firefox */
    {
    from {width: 0px; height: 60px; opacity: 0;}
    to {width: 100%; height: 60px; opacity: 1;}
    }

    @-webkit-keyframes myHeader /* Safari and Chrome */
    {
    from {width: 0px; height: 60px; opacity: 0;}
    to {width: 100%; height: 60px; opacity: 1;}
    }

    @-o-keyframes myHeader /* Opera */
    {
    from {width: 0px; height: 60px; opacity: 0;}
    to {width: 100%; height: 60px; opacity: 1;}
    }
    .ui-header-after{
        border-bottom:none;
        text-align: center;
        position: fixed;
        animation:myHeaderAf 0.2s;
        -moz-animation:myHeaderAf 0.2s; /* Firefox */
        -webkit-animation:myHeaderAf 0.2s; /* Safari and Chrome */
        -o-animation:myHeaderAf 0.2s; /* Opera */
        animation-fill-mode : forwards;
    }
    @keyframes myHeaderAf
    {
    from {width: 100%; height: 60px; opacity: 1;}
    to {width: 0px; height: 60px; }
    }

    @-moz-keyframes myHeaderAf /* Firefox */
    {
    from {width: 100%; height: 60px; opacity: 1;}
    to {opacity: 0; width: 0px; height: 60px; }
    }

    @-webkit-keyframes myHeaderAf /* Safari and Chrome */
    {
    from {width: 100%; height: 60px; opacity: 1;}
    to {opacity: 0; width: 0px; height: 60px; }
    }

    @-o-keyframes myHeaderAf /* Opera */
    {
    from {width: 100%; height: 60px; opacity: 1;}
    to {opacity: 0; width: 0px; height: 60px; }
    }

    .ui-ai{
        display: block;
        width:60px;
        height:60px;
    }
    .ui-ai-before{
        width:60px;
        height:60px;
        animation:myImg 0.5s;
        -moz-animation:myImg 0.5s; /* Firefox */
        -webkit-animation:myImg 0.5s; /* Safari and Chrome */
        -o-animation:myImg 0.5s; /* Opera */
        animation-fill-mode : forwards;
    }
    @keyframes myImg
    {
    from {width: 60px; height: 60px;}
    to {width: 20px; height: 20px; opacity: 0; left: 10; bottom: 30px;}
    }

    @-moz-keyframes myImg /* Firefox */
    {
    from {width: 60px; height: 60px;}
    to {width: 20px; height: 20px; opacity: 0; left: 10; bottom: 30px;}
    }

    @-webkit-keyframes myImg /* Safari and Chrome */
    {
    from {width: 60px; height: 60px;}
    to {width: 20px; height: 20px; opacity: 0; left: 10; bottom: 30px;}
    }

    @-o-keyframes myImg /* Opera */
    {
    from {width: 60px; height: 60px;}
    to {width: 20px; height: 20px; opacity: 0; left: 10; bottom: 30px;}
    }
    .ui-ai-after{
        width:60px;
        height:60px;
        animation:myImgAf 0.5s;
        -moz-animation:myImgAf 0.5s; /* Firefox */
        -webkit-animation:myImgAf 0.5s; /* Safari and Chrome */
        -o-animation:myImgAf 0.5s; /* Opera */
        animation-fill-mode : forwards;
    }
    @keyframes myImgAf
    {
    from {width: 20px; height: 20px; opacity: 0; left: 30; bottom: 60px;}
    to {width: 60px; height: 60px; left:20px; bottom:-30px;}
    }

    @-moz-keyframes myImgAf /* Firefox */
    {
    from {width: 20px; height: 20px; opacity: 0; left: 30; bottom: 60px;}
    to {width: 60px; height: 60px; left:20px; bottom:-30px;}
    }

    @-webkit-keyframes myImgAf /* Safari and Chrome */
    {
    from {width: 20px; height: 20px; opacity: 0; left: 30; bottom: 60px;}
    to {width: 60px; height: 60px; left:20px; bottom:-30px;}
    }

    @-o-keyframes myImgAf /* Opera */
    {
    from {width: 20px; height: 20px; opacity: 0; left: 30; bottom: 60px; }
    to {width: 60px; height: 60px; left:20px; bottom:-30px; }
    }
</style>
<header class="ui-header ui-header-positive ui-background-color-1e1e2e js-header" id="js-header">
    <i class="ui-robot-icon"></i>
    <p class="ui-prompt-text">有什么事可以随时呼叫我</p>
    <i class="ui-myself-icon"></i>
</header>
<section class="ui-banner ui-flex ui-flex-pack-center ui-flex-align-center">
    <i class="ui-myself-icon ui-myself-block"></i>
    <img class="logoImg" src="img/logo.png">
    <div class="ui-ai"></div>
</section>
<section class="ui-container">
    <article class="ui-padding-tb ui-whitespace" >
        <h2 class="ui-txt-feeds ui-padding-b ui-txt-size18">Hi,亲爱的墨一</h2>
        <p class="ui-txt-size14 ui-nowrap-multi">根据您的三百万预算在望京商业圈的搜索到了{{o.data.length}}套房源</p>
    </article>

    <ul class="ui-list ui-list-text ui-border-tb ui-margin-t">
        <li class="ui-border-b" ng-repeat="item in o.data">
            <div style="display:none" id="hid">{{item.id}}</div>
            <div class="ui-list-img ui-list-img90x90">
                <span style="background-image:url({{item.house_thumb}})"></span>
            </div>
            <div class="ui-list-info">
                <h2 class="ui-nowrap"><a href="#/details/{{item.id}}" class="ui-txt-black">{{item.house_title}}</a></h2>
                <div class="ui-row ui-padding-t ui-margin-t">
                    <div class="ui-col ui-col-50 ">
                        <p class="ui-txt-size12 ui-nowrap ">{{item.house_room}}室{{item.house_hall}}厅 {{item.house_totalarea}}平米</p>
                        <span class="ui-txt-size12 ui-nowrap ui-txt-muted"><i class="zg-icon zg-icon-pos"></i>{{item.area_name}}</span>
                    </div>
                    <div class="ui-col ui-col-50">
                        <div class="ui-row">
                            <div class="ui-col ui-col-50 ui-flex-ver ui-border-r" >
                                <em class="ui-flex ui-flex-pack-center ui-txt-size20 ui-txt-impact">85<small>%</small></em>
                                <span class="ui-txt-muted ui-txt-size12 ui-flex ui-flex-pack-center ui-nowrap">匹配度</span>
                            </div>
                            <div class="ui-col ui-col-50 ui-flex-ver ui-flex-pack-center">
                                <em class="ui-flex ui-flex-pack-center ui-txt-size20">{{item.min_price}}</em>
                                <span class="ui-flex ui-flex-pack-center ui-txt-muted ui-txt-size12">万</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</section>
